<template>
	<view class="logistics">
		<u-sticky>
			<view class="logistics-input">
				<view class="input-right">
					<image src="../../static/serach.png" />
					<input v-model="queryParams.name" value="" type="text" placeholder="请输入名称"
						placeholder-style="font-size: 28rpx; font-weight: 500; color: #C6C7CB;" @input="search" />
				</view>
			</view>
		</u-sticky>

		<view class="content">
			<view v-for="(item, index) in dataList" :key="index" class="content-item">
				<view class="row">
					<view class="row-label">型号</view>
					<view class="row-value">{{ item.marking ||'-'}}</view>
				</view>

				<view class="row">
					<view class="row-label">名称</view>
					<view class="row-value">{{ item.name ||'-'}}</view>
				</view>
				<view class="row">
					<view class="row-label">备件号</view>
					<view class="row-value">{{ item.spare ||'-'}}</view>
				</view>
				<view class="row">
					<view class="row-label">序列号</view>
					<view class="row-value">{{ item.serial ||'-'}} </view>
				</view>
				<view class="row">
					<view class="row-label">品牌</view>
					<view class="row-value">{{ item.pinpai ||'-'}} </view>
				</view>
				<view class="tag" :class="{
            send: item.is_bill == 2,
            receive: item.is_bill == 1,
          }">{{ item.is_bill == 2 ? '有票据':'无票据'}}</view>
				<view class="row" v-if="userInfo.identity!=1">
					<view class="row-label">供应商</view>
					<view class="row-value">{{ item.supplier || '-' }}</view>
				</view>
				<view class="row">
					<view class="row-label">数量</view>
					<view class="row-value">{{item.num || 0 }}</view>
				</view>
				<view class="row" v-if="userInfo.identity!=1">
					<view class="row-label">单价</view>
					<view class="row-value">￥{{ item.price || 0.00 }}</view>
				</view>
				<view class="row" v-if="userInfo.identity!=1">
					<view class="row-label">总价</view>
					<view class="row-value">￥{{ item.amnout || 0.00 }}</view>
				</view>
				<view class="row" style="display: inline-block;" v-if="item.images.length>0">
					<view class="row-label">图片</view>
					<view class="row-value">
						<image v-for="(img, k) in item.images" :key="k" :src="img" @click="preview(k, item.images)" />
					</view>
				</view>
			</view>
		</view>
		<empty v-if="dataList.length == 0" />
		<button-btm  v-if="userInfo.identity!=1">
			新增配件
		</button-btm>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import xflSelect from "@/components/xfl-select/xfl-select.vue";
	import buttonBtm from '@/components/button-btm.vue'
	export default {
		components: {
			empty,
			xflSelect,
			buttonBtm
		},
		data() {
			return {
				dataList: [],
				last_page: 1,
				queryParams: {
					name: '',
					page: 1,
				},
				userInfo:{}
			};
		},
		onLoad() {
			// this.getList();
		},
		onShow() {
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.userInfo = res.data
				}
			})
			this.dataList = []
			this.getList();
		},
		methods: {
			// 预览图片
			preview(current, urls) {
				uni.previewImage({
					current,
					urls,
				});
			},
			/* 底部按钮 跳转 */
			btnJump() {
				wx.navigateTo({
					url: '../addRecord/addCess'
				})
			},
			search() {
				this.queryParams.page = 1
				this.dataList = []
				this.getList()
			},
			// 获取数据列表
			getList() {
				this.$https.post("/accessory/list", this.queryParams).then((res) => {
					this.last_page = res.data.last_page;
					this.dataList = this.dataList.concat(res.data.data).map(item => {
						return {
							...item,
							images: item.image ? item.image.split(',') : []
						}
					});
				});
			},
		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page++
				this.getList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.logistics {
		padding: 28rpx 0rpx;
		background-color: #f6f6fb;
		min-height: calc(100vh - 86rpx);
		padding-top: 0;

		&-input {
			display: flex;
			align-items: center;
			background-color: #f6f6fb;
			padding: 26rpx;

			.input-right {
				flex: 1;
				background-color: #ffffff;
				border-radius: 88rpx;
				padding: 0 20rpx;
				height: 80rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #c6c7cb;
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}

				input {
					flex: 1;
				}
			}
		}

		.content {
			margin-top: 0rpx;
			padding: 0 26rpx;
			margin-bottom: 130rpx;

			&-item {
				box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.05);
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;

				.tag {
					position: absolute;
					right: 0;
					top: 0;
					padding: 10rpx 30rpx;
					font-size: 26rpx;
					color: #fff;
					background-color: #82dcec;
					border-radius: 0 20rpx 0 20rpx;
				}

				.row {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					line-height: 46rpx;

					&-label {
						color: #969699;
						width: 160rpx;
					}

					&-value {
						color: #303030;
						flex: 1;
						word-break: break-all;

						image {
							width: 140rpx;
							height: 140rpx;
							margin-right: 20rpx;
							margin-top: 20rpx;
						}
					}
				}

				.send {
					background-color: #82dcec;
				}

				.receive {
					background-color: #f8c168;
				}
			}
		}
	}
</style>